<template>
    <div>
        <h1>套餐 SKU 选择系统</h1>
        <div class="package-list">
            <PackageCard v-for="packageData in packages" :key="packageData.model" :package-data="packageData"
                :is-selected="selectedPackage && selectedPackage.model === packageData.model"
                @package-selected="handlePackageSelected" />
        </div>
        <SkuSelector v-if="selectedPackage" :selected-package="selectedPackage" @price-updated="handlePriceUpdated"
            @sku-selected="handleSkuSelected" />
        <PriceCalculator v-if="selectedPackage" :package-price="selectedPackage.price" :sku-add-price="skuAddPrice"
            :total-price="totalPrice" />
        <ContractGenerator v-if="selectedPackage" :selected-package="selectedPackage" :selected-skus="selectedSkus"
            :total-price="totalPrice" />
    </div>
</template>

<script>
import PackageCard from '@/components/PackageCard.vue';
import SkuSelector from '@/components/SkuSelector.vue';
import PriceCalculator from '@/components/PriceCalculator.vue';
import ContractGenerator from '@/components/ContractGenerator.vue';

export default {
    components: {
        PackageCard,
        SkuSelector,
        PriceCalculator,
        ContractGenerator
    },
    data() {
        return {
            packages: [
                {
                    name: 'Apex C350',
                    model: 'Apex C350',
                    price: 10300,
                    skus: {
                        cpu: {
                            'i7': { name: 'Intel i7', price: 1000 },
                            'i9': { name: 'Intel i9', price: 2000 }
                        },
                        memory: {
                            '16g': { name: '16GB', price: 500 },
                            '32g': { name: '32GB', price: 1000 }
                        }
                    }
                },
                {
                    name: 'Apex Z350',
                    model: 'Apex Z350',
                    price: 10300,
                    skus: {
                        cpu: {
                            'ryzen7': { name: 'AMD Ryzen 7', price: 1200 },
                            'ryzen9': { name: 'AMD Ryzen 9', price: 2200 }
                        },
                        memory: {
                            '16g': { name: '16GB', price: 500 },
                            '32g': { name: '32GB', price: 1000 }
                        }
                    }
                }
            ],
            selectedPackage: null,
            skuAddPrice: 0,
            totalPrice: 0,
            selectedSkus: {}
        };
    },
    methods: {
        handlePackageSelected(packageData) {
            this.selectedPackage = packageData;
            this.skuAddPrice = 0;
            this.totalPrice = packageData.price;
            this.selectedSkus = {};
        },
        handlePriceUpdated(newPrice) {
            this.totalPrice = newPrice;
        },
        handleSkuSelected(skus) {
            this.selectedSkus = skus;
        }
    }
};
</script>

<style scoped>
.package-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
</style>